{extend name="common/indexa" /} {block name="style"}
<link rel="stylesheet" href="__TEMPLATE__/mobile/index/css/index.css" type="text/css">
<link rel="stylesheet" href="__TEMPLATE__/mobile/index/css/member.css" type="text/css">
<link rel="stylesheet" type="text/css" href="__SYSMET__/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="__SYSMET__/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link href="__TEMPLATE__/sysme/css/layer.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="__TEMPLATE__/mobile/index/js/clipboard.min.js"></script>
<script src="__TEMPLATE__/sysme/js/layer.js" type="text/javascript"></script>

<script>
	function change_pic() {
		var imgObj = document.getElementById("meg");
		if(imgObj.getAttribute("src", 2) == "img/me.png") {
			imgObj.src = "__TEMPLATE__/mobile/index/img/me1.png";
		} else {
			imgObj.src = "__TEMPLATE__/mobile/index/img/me.png";
		}
	}
</script>
<script type="text/javascript">
	function display_div(can) {
		for(var i = 1; i < 2; i++) {
			if(can == i) {
				if(document.getElementById("ch" + i).style.display == "none") {
					document.getElementById("ch" + i).style.display = "block";
				} else
				if(document.getElementById("ch" + i).style.display == "block") {
					document.getElementById("ch" + i).style.display = "none";
				}

			}

		}
	}
</script>
{/block} {block name="body"}
<style type="text/css">
	body{background:#f5f5f9;}
	.geren_name_qian {
		width:auto;
		height: 35px;
		float:left;

	}
	#dist{position:absolute;right:5%;top:7px;}
	.geren_name_qian a {
		margin-right:3%;
		display: inline-block;
		float: left;
		color: #FFFFFF;
	}

	
	.geren_name input {
		width: 19%;
		height: 35px;
		border-radius: 4px;
		background: #a0a0a0;
		color: #000000;
		font-size:14px;
		float:left;
		margin-top:10px;
	}

	.geren_name input:last-child {
		background: #ffbc27;
		color:#000;
	}
	.nav_1 li{float: left;width: 25%;text-align: center;}
	.nav_1 li a{display: block;font-size: 14px;padding-bottom: 10px;}
	.nav_1 li a img{display: block;margin:19px auto 15px;width:25px;}
	.box_1 li{width: 33%;float: left;height:100px;}
	.box_1 li a{display: block;text-align: center;font-size: 13px;}
	.box_1 li a img{display: block;margin:19px auto 20px;width: 25px;}

	.zdc{width: 100%;height: 100%;background: #000000;opacity: 0.6;z-index: 111111;position: fixed;top: 0;display: none;}
	.qqkf{width: 80%;position: fixed;top: calc(50% - 50px);left: calc((100% - 80%)/2);background: #FFFFFF;display: none;z-index: 11111111111;}
	.qqkf p{height: 70px;line-height: 70px;font-size: 12px;color: #33333;border-bottom: 1px solid #CCCCCC;}
	.qqkf>span{height: 28px;line-height: 28px;font-size: 16px;color: #0000FF;}
	#tsk{width:200px;height:75px;background:#ccc;position:absolute;top:300px;left:50%;margin-left:-100px;display:none;line-height:75px;border-radius: 5px;text-align: center;font-size:14px;}
	.box_1 span{font-size:15px;}

	.nav-link {
		position: relative;
		/*padding: 0 14px;*/
		/*line-height: 34px;*/
		/*font-size: 10px;*/
		/*font-weight: bold;*/
		/*color: #555;*/
		text-decoration: none;
	}
	.nav-link:hover {
		color: #333;
		/*text-decoration: underline;*/
	}
	li{ box-sizing: border-box;}
	.nav-counter {
		position: absolute;
		top: 20px;
		right: 23px;
		/* min-width: 8px; */
		font-size: 13px;
		/* height: 24%; */
		width: 22%;
		line-height: 20px;
		margin-top: -11px;
		padding: 0px 0px;
		font-weight: normal;
		color: white;
		text-align: center;
		text-shadow: 0 1px rgba(0, 0, 0, 0.2);
		background: #e23442;
		border: 1px solid #911f28;
		border-radius: 11px;
		background-image: -webkit-linear-gradient(top, #e8616c, #dd202f);
		background-image: -moz-linear-gradient(top, #e8616c, #dd202f);
		background-image: -o-linear-gradient(top, #e8616c, #dd202f);
		background-image: linear-gradient(to bottom, #e8616c, #dd202f);
		-webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
		box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
	}

	.nav-counter-green {
		background: #75a940;
		border: 1px solid #42582b;
		background-image: -webkit-linear-gradient(top, #8ec15b, #689739);
		background-image: -moz-linear-gradient(top, #8ec15b, #689739);
		background-image: -o-linear-gradient(top, #8ec15b, #689739);
		background-image: linear-gradient(to bottom, #8ec15b, #689739);
	}

	.nav-counter-blue {
		background: #e94335;
		border: 1px solid #e94335;
		background-image: -webkit-linear-gradient(top, #67a7e9, #2580df);
		background-image: -moz-linear-gradient(top, #67a7e9, #2580df);
		background-image: -o-linear-gradient(top, #67a7e9, #2580df);
		background-image: linear-gradient(to bottom, #e94335, #e94335);
	}
	.geren_tx {
		height: auto;
		float: left;
		width: 100%;
		border-radius: 0;
		overflow: hidden;}
</style>
<div class="cont">

	<div class="geren_xx" style="background:#d91d36;overflow:hidden;padding-top:25px;position:relative;height:140px;border-bottom:1px solid #ccc;">
		<div id="dist"><a href="{:url('pocessing/logout')}" style="color:#fff;font-size:18px;">退出</a></div>
		<div class="geren_tx" style="">
			<div style="width:50px;height:50px;border-radius:50%;float:left;margin-right:5px;margin-left:5px;position:relative;" >
				<div id="photo"  style="width:100%;height:100%;border-radius: 50%;background:url({if(empty($header))} '__TEMPLATE__/mobile/index/img/toux.png' {else/} '__UPLOADS__avatar/{$header}' {/if});background-size:cover;"></div>
				<input type="file" style="opacity:0; filter:alpha(opacity=0); height: 50px; width: 50px; position: absolute; top: 0; left: 0; z-index: 9;" onchange="setFiles(this)" id="touxiang">
			</div>
			<div style="float:left;text-align: left;">
				<div style="font-size:16px;color:white;font-weight:normal;font-family:'微软雅黑';"><span>{$user}</span>&nbsp;&nbsp;<a href="{:url('member/degree')}" style="font-size:16px;color:white;font-weight:normal;font-family:'微软雅黑';text-align: left;line-height:18px;">当前等级：<span style="color:yellow;">{$f['class_name']}</span></a></div>
				{if(!empty($next_level))}
				<div style="font-size:12px;color:white;font-weight:normal;font-family:'微软雅黑';text-align: left;line-height:20px;">升级<span style="color:yellow;">{$next_level}</span>
					{if($next_money>0 || $next_xml>0 )}
					还需
					{if( $next_money>0 )}<span>充值:{$next_money}元</span>&nbsp{/if}
					{if( $next_xml>0 )}<span>洗码:{$next_xml}元</span>{/if}
					{else/}
					已满足升级条件，下周一自动升级
					{/if}
				</div>
				{/if}
			</div>

		</div>
		<div class="geren_name" style="width:100%;height:60px;margin-left:0;background:url(__TEMPLATE__/mobile/index/img/member_bg.png) no-repeat;
						background-size:contain;">
			<p class="geren_name_qian" style="width:44%;font-size:16px;line-height:28px;margin-top:14px;margin-left:22px;">

				<a style="float:left;width:22px;" href="#" ><img src="__TEMPLATE__/mobile/index/img/icon_coin.png" style="margin-top:3px;width:22px;"></a>
				<a id="balance" style="color:#ffd700;float:left;font-size:15px;font-weight:bold;">{$f.je}</a>
				<a  style="float:left;" onclick="refreshMT()"><img id="sximg" src="__TEMPLATE__/mobile/index/img/icon_refersh.png" style="margin-top:7px;width:14px;"></a>

			</p>

			<input type="button" name="" id="" value="提现" style="float:right;margin-right:25px;" onclick="javascrtpt:window.location.href='{:url('member/tixian')}'"/>
			<input type="button" name="" id="" value="充值" style="float:right;margin-right:3%;" onclick="javascrtpt:window.location.href='{:url('member/chongzhi')}'"/>

		</div>
	</div>


	<ul class="nav_1">

		
		<li><a href="{:url('member/payjl')}" ><i class="Hui-iconfont" style="display:block;font-size:26px;margin-top:19px;margin-bottom:12px;">&#xe6b7;</i><span>充值记录</span></a></li>
		<li><a href="{:url('member/tixianjilv')}"><i class="Hui-iconfont" style="display:block;font-size:26px;margin-top:19px;margin-bottom:12px;">&#xe6ca;</i><span>提现记录</span></a></li>
		<li><a href="{:url('lottery/zhudan')}"><i class="Hui-iconfont" style="display:block;font-size:26px;margin-top:19px;margin-bottom:12px;">&#xe70c;</i><span>投注记录</span></a></li>
		<li><a href="{:url('member/xiaoxi')}" class="nav-link"><i class="Hui-iconfont" style="display:block;font-size:26px;margin-top:19px;margin-bottom:12px;">&#xe6b3;</i>{if($count>0)}<div class="nav-counter nav-counter-blue">{$count}</div>{/if}<span>消息中心</span></a></li>

		<div class="clear"></div>
	</ul>

	<ul class="box_1" style="height:450px;margin-bottom:20px;border-top:1px solid #ccc;" >
		<li style="border-bottom: 1px solid #ddd;border-right:1px solid #ddd;box-sizing: border-box;"><a href="{:url('member/notice')}"><img src="__TEMPLATE__/mobile/index/img/notice.png"/><span>通知公告</span></a></li>
		<li style="border-bottom: 1px solid #ddd;box-sizing: border-box;border-right:1px solid #ddd;"><a href="{:url('lottery/active')}"><img src="__TEMPLATE__/mobile/index/img/hddt.png"/><span>活动大厅</span></a></li>
		<li style="border-bottom: 1px solid #ddd;box-sizing: border-box;width:34%;"> <a href="{:url('member/zhmx')}"><img src="__TEMPLATE__/mobile/index/img/zhmx.png"/><span>账户明细</span></a></li>
		<li style="border-bottom: 1px solid #ddd;box-sizing: border-box;width:33%;border-right:1px solid #ddd;"> <a href="{:url('member/qita')}"><img src="__TEMPLATE__/mobile/index/img/xitongcaijin-01.png"/><span>系统彩金</span></a></li>
		<li style="border-bottom: 1px solid #ddd;border-right:1px solid #ddd;box-sizing: border-box;"><a href="{:url('member/degree')}"><img src="__TEMPLATE__/mobile/index/img/djsm.png"/><span>等级说明</span></a></li>
		<li style="border-bottom: 1px solid #ddd;width:34%;box-sizing: border-box;"><a href="{:url('lottery/guize')}"><img src="__TEMPLATE__/mobile/index/img/wfgz.png"/><span>玩法规则</span></a></li>
		
		<li style="border-bottom: 1px solid #ddd;box-sizing: border-box;border-right:1px solid #ddd;"><a href="https://static.meiqia.com/dist/standalone.html?_=t&eid=117139&agentid=0af04767a5b9f8c6800564e12bf3bd10"><img src="__TEMPLATE__/mobile/index/img/kefu-01.png"/><span>在线客服</span></a></li>
		<li style="border-bottom: 1px solid #ddd;border-right:1px solid #ddd;box-sizing: border-box;"><a href="javascript:;" id="qqkf"><img src="__TEMPLATE__/mobile/index/img/QQ-01.png"/><span>QQ客服</span></a></li>
		<li style="border-bottom: 1px solid #ddd;box-sizing: border-box;width:34%;"><a href="javascript:;" id="wxkf"><img src="__TEMPLATE__/mobile/index/img/wx_kf.png"/><span>微信客服</span></a></li>
		
		{if($f.dl=='1')}
		<li style="border-bottom: 1px solid #ddd;box-sizing: border-box;width:33%;border-right:1px solid #ddd;"><a href="{:url('member/dailiCenter')}"><img src="__TEMPLATE__/mobile/index/img/daili.png" style="margin: 15px auto 20px;width: 30px;"/><span>代理中心</span></a></li>
		{else/}
		{if($open==1)}
		<li style="border-bottom: 1px solid #ddd;box-sizing: border-box;width:33%;border-right:1px solid #ddd;"><a href="{:url('member/shenqing')}"><img src="__TEMPLATE__/mobile/index/img/sq.png" style="margin: 15px auto 20px;width: 30px;"/><span>代理申请</span></a></li>
		{/if}
		{/if}
		<li style="border-bottom: 1px solid #ddd;box-sizing: border-box;width:33%;border-right:1px solid #ddd;"><a href="{:url('member/passxg')}"><img src="__TEMPLATE__/mobile/index/img/xiugaimima-01.png"/><span>密码修改</span></a></li>
		<div class="clear"></div>
	</ul>



	<div class="zdc"></div>
	<div class="qqkf" id="qqkf2">
		<p style='margin-left:10px;position: relative;'>请手动添加客服QQ号：<input type="text" id="qqhm" style="border: 0;height: 69px;position: absolute;top: 0;left: 127px;" value="" readonly="readonly" /><br /></p>
		<span class="btn fuzhibtn" data-clipboard-action="copy" data-clipboard-target="#qqhm" style='margin-left: 120px;border: none;background: white;height: 25px;'>复制</span>
	</div>

	<div class="qqkf" id="wxkf2">
		<p style='margin-left:10px;position: relative;'>请手动添加客服微信号：<input type="text" id="wxhm" style="border: 0;height: 69px;position: absolute;top: 0;left: 127px;" value="" readonly="readonly" /><br /></p>
		<span class="btn fuzhibtn" data-clipboard-action="copy" data-clipboard-target="#wxhm" style='margin-left: 120px;border: none;background: white;height: 25px;'>复制</span>
	</div>
	<div id="tsk"></div>

	<script type="text/javascript">

		var obj = document.querySelector("#photo");
		var file1 = document.querySelector("#touxiang");
		obj.addEventListener("click",fn,false);
		function fn(){
			file1.click()
		}
		file1.addEventListener("change",fn1,false);
		function fn1(){
			files = this.files[0];
			var Ofile = new FileReader();
			Ofile.readAsDataURL(files);
			Ofile.onload = function(){
				var self = this;
				$.ajax({
					type: "post",
					url: "/mobile/User/changeHeader",
					data:{img: this.result},
					success: function (data) {
						if( 1==parseInt(data) ){
							obj.style.background= 'url('+self.result+')';
							obj.style.backgroundSize= 'cover';
						}else{
							layer.msg('上传失败');
						}
					},
					error:function(){
						layer.msg('上传失败');
					}
				});
			}
		}
		var files;
		var setFiles = function(element){
			files = element.files[0];
		};


		function refreshMT() {
			$("#sximg").addClass('hui-rotatein');
			$.ajax({
				type: "post",
				url: "/index/Processing/RefreshMoney",
				success: function (data) {
					if (data != "out") {
						$('#balance').html(data);
					}
				}
			});
			$('#sximg').on({
				'animationend':function(){
					$('#sximg').removeClass()},
				'webkitAnimationEnd':function(){
					$('#sximg').removeClass()},
			})
		}

		$("#qqkf").click(function(){
			$.ajax({
				type: "post",
				url: "/index/User/service?mobile=1",
				success: function (data) {
					if(data){
						$("#qqhm").val(data);
						$(".zdc").css("display","block");
						$("#qqkf2").css("display","block");
					}


				}
			});
		})
		$("#wxkf").click(function(){
			$.ajax({
				type: "post",
				url: "/index/User/service?mobile=1&source=2",
				success: function (data) {
					if(data){
						$("#wxhm").val(data);
						$(".zdc").css("display","block");
						$("#wxkf2").css("display","block");
					}


				}
			});
		})




	</script>




	<script>
		var clipboard = new ClipboardJS('.btn');

		clipboard.on('success', function(e) {
			//console.log(e);
		});

		clipboard.on('error', function(e) {
			//console.log(e);
		});




		$('.fuzhibtn').click(function(){

			$(".zdc").css("display","none");
			setTimeout(function () {
				$("#qqkf2").css("display","none");
				$("#wxkf2").css("display","none");
			}, 10);

			$('#tsk').css('display','block').html('已复制好，可贴粘。')

			setTimeout(function () {
				$("#tsk").css("display","none");
			}, 1000);

		})
	</script>

</div>

{/block}
